<template>
  <div class="single-logic">
    <div class="single-selection">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="source-item">
            <div class="star"></div>
            <div class="source-title linear-purpose">加工表</div>
            <div class="source-content">
              {{ tagConfigJson.procTable }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="source-item">
            <div class="star"></div>
            <div class="source-title linear-purpose">加工字段</div>
            <div class="source-content">
              {{ tagConfigJson.procField }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="source-item">
            <div class="star"></div>
            <div class="source-title linear-purpose">统计方式</div>
            <div class="source-content">
              {{ tagConfigJson.statNm }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="logic-title"><icon-svg name="iconSystem"></icon-svg>过滤条件</div>
    <div class="logic-wrapper">
      <div class="logic" v-if="tagConfigJson.labs.length > 1">
        <span>且</span>
      </div>
      <div v-for="(item, index) in tagConfigJson.labs" :key="index" class="lab-item">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="lab-name">{{ item.labFldMap }}</div>
          </el-col>
          <el-col :span="6">
            <el-select v-model="item.oprator" class="operator" disabled>
              <el-option label="---" value=""></el-option>
              <el-option
                v-for="opera in operatorType('type' + item.valueType)"
                :key="opera.value"
                :label="opera.key"
                :value="opera.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="10">
            <single-filter-content :config="item" disabled></single-filter-content>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import operator from '@/views/modules/factory/operator'
import singleFilterContent from '@/views/modules/factory/factory-content-item'
export default {
  components: {
    singleFilterContent
  },
  props: {
    tagConfigJson: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    operatorType(key) {
      return operator[key]
    }
  }
}
</script>

<style lang="scss">
.single-logic {
  padding: 20px 20px 0 20px;
  background-color: #f6f7f8;
  .logic-title {
    font-size: 18px;
    font-weight: bold;
    color: $theme-color;
    margin-bottom: 10px;
    svg {
      margin-right: 10px;
    }
  }
  .source-item {
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
    box-shadow: #eee 0 0 10px;
    position: relative;
    .source-title {
      font-weight: bold;
      width: 150px;
      padding-left: 50px;
      line-height: 45px;
      color: #fff;
      position: absolute;
      &:before {
        width: 10px;
        height: 10px;
        content: '';
        background-color: #eee9ff;
        border: 2px solid #cfc7ee;
        margin-top: -5px;
        position: absolute;
        top: 50%;
        left: 20px;
        border-radius: 50%;
      }
      &:after {
        width: 0;
        height: 0;
        content: '';
        margin-top: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
      }
      &.linear-purpose:after {
        border-left: 10px solid #7c6bed;
      }
      &.linear-blue:after {
        border-left: 10px solid #635fd7;
      }
      &.linear-cyan:after {
        border-left: 10px solid #0696ec;
      }
      &.linear-red:after {
        border-left: 10px solid #c563ee;
      }
    }
    .source-content {
      line-height: 45px;
      padding: 0 30px 0 180px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &.rela-content {
        padding-left: 195px;
      }
    }
    .el-select {
      width: 100%;
    }
    .el-select .el-input__inner,
    .el-input .el-input__inner {
      height: 45px;
      line-height: 45px;
      border: 0;
      background-color: transparent;
    }
  }
  .logic-wrapper {
    padding: 20px 100px;
    margin-bottom: 10px;
    background-color: #f5f5f5;
    position: relative;
    .lab-item {
      margin-bottom: 20px;
    }
    .lab-name {
      height: 40px;
      line-height: 40px;
      padding: 0 15px;
      text-align: center;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      color: #6a86cc;
      background-color: #e6eeff;
    }
    .el-select {
      width: 100%;
    }
    .el-input__inner {
      color: #6a86cc;
      background-color: #e6eeff;
    }
    .el-input__icon {
      line-height: 28px;
    }
    .logic {
      font-size: 12px;
      width: 80px;
      position: absolute;
      top: 20px;
      left: 20px;
      bottom: 20px;
      span {
        display: inline-block;
        font-size: 12px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        border-radius: 50%;
        padding: 0 !important;
        text-align: center;
        color: #fff;
        background-color: #c3813f;
        position: absolute;
        top: calc(50% - 10px);
        left: 10px;
        margin-top: -12.5px;
      }
      &:before {
        width: 50px;
        height: calc(50% - 20px);
        content: '';
        border-width: 3px;
        border-top: 1px solid #c3813f;
        border-left: 1px solid #c3813f;
        position: absolute;
        top: 8px;
        bottom: 50%;
        left: 22.5px;
      }
      &:after {
        width: 50px;
        height: calc(50% - 32.5px);
        content: '';
        border-bottom: 1px solid #c3813f;
        border-left: 1px solid #c3813f;
        position: absolute;
        bottom: 30px;
        left: 22.5px;
      }
    }
    .el-date-editor.el-input,
    .el-date-editor .el-input__inner {
      width: 100%;
    }
    .el-input-number {
      width: 100%;
      .el-input__inner {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }
    .normal {
      width: 40%;
    }
    .el-date-editor,
    .el-date-editor.el-input,
    .el-date-editor .el-input__inner {
      width: 100%;
    }
    .el-range-input {
      color: #6a86cc;
      background-color: transparent;
    }
    .selector-field {
      display: inline-block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0 15px;
      text-align: center;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      color: #6a86cc;
      background-color: #e6eeff;
      cursor: pointer;
    }
  }
}
</style>
